﻿@namespace MudBlazor.Docs.Examples

<MudSimpleTable Dense="@dense" Hover="@hover" Bordered="@bordered" Striped="@striped" Style="overflow-x: auto;">
    <thead>
        <tr>
            @foreach (var h in headings)
            {
                <th>@h</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var row in rows)
        {
            <tr>
                @foreach (var x in row.Split())
                {
                    <td>@x</td>
                }
            </tr>
        }
    </tbody>
</MudSimpleTable>
<MudToolBar>
    <MudSwitch @bind-Value="hover" Color="Color.Primary">Hover</MudSwitch>
    <MudSwitch @bind-Value="dense" Color="Color.Secondary">Dense</MudSwitch>
    <MudSwitch @bind-Value="striped" Color="Color.Tertiary">Striped</MudSwitch>
    <MudSwitch @bind-Value="bordered" Color="Color.Warning">Bordered</MudSwitch>
</MudToolBar>

@code {
    private bool dense = false;
    private bool hover = true;
    private bool striped = false;
    private bool bordered = false;

    string[] headings = { "ID", "Name", "Email", "Gender", "IP Address" };
    string[] rows = {
        @"1 Clara clara.jones+team@example.com Female 192.0.2.11",
        @"2 Felix felix_martin88@example.net Male 198.51.100.22",
        @"3 Isla isla-fernandez@example.org Female 203.0.113.33",
        @"4 Jonah jonah.brown_dev@example.com Male 192.0.2.44",
        @"5 Mia mia.chen-marketing@example.net Female 198.51.100.55",
        @"6 Hugo hugo.taylor123@example.org Male 203.0.113.66",
    };
}
